<html>

<head>
  <meta charset="UTF-8">
  <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans" rel="stylesheet">
  <style>
    html, head, body { padding: 0; margin: 0; line-height: 1.5; }
    a { color: #1293D8; text-decoration: none; }
    a:hover { text-decoration: underline; }
  </style>
</head>

<body>

<div style="width:100%; height:100%; background-color:#eee; display:flex; align-items:center; justify-content:center;">
  <div style="border-top:4px solid #1293D8; min-width: 360px; background-color:white; font-family:'IBM Plex Sans',sans-serif; padding:0 2em 1em; margin:2em;">
    <h1 style="font-weight:normal;">Online Editor</h1>
    <p>Write and compile code online!</p>
    <ul>
      <li><a href="/examples/hello" target="_top">Hello World!</a></li>
      <li><a href="/examples/buttons" target="_top">Buttons</a></li>
      <li><a href="/examples/clock" target="_top">Clock</a></li>
      <li><a href="/examples/quotes" target="_top">HTTP</a></li>
      <li><a href="/examples/cards" target="_top">Cards</a></li>
      <li><a href="/examples" target="_top">More!</a></li>
    </ul>
    <p>Check out <a href="https://guide.elm-lang.org" target="_top">the official guide</a> for a tutorial on Elm.</p>
  </div>
</div>

</body>
</html>
